<template>
    <div class="mainInput">
        <input 
            type="text"
            class="add-input"
            placeholder="接下去要做什么?"
            autofocus="autofocus"
            @keyup.enter = "addtodo"    
        >
    </div>
</template>
<script>
let id = 0;
export default {   
    data(){
        return{
            todoValue:{
                id:id,
                content:'',
                completed:false,
            }
        }
    },
    methods:{
        addtodo(e){
            id++
            this.todoValue = {
                id : id,
                content: e.target.value.trim(),
                completed: false
            };
            this.$emit('transmit', this.todoValue);
            e.target.value = '';
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '@/assets/styles/normal.scss';
    .mainInput {
        background-color: #fff;
        @include flexCol;
        padding: 30px 50px;
        width: 80%;
    }
    .mainInput input {
        color: #666;
        font-size: 25px;
        line-height: 40px;
        width: 60%;
        border: 0;
    }
    .mainInput input::placeholder {
        color: #ccc;
    }
</style>

